<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
	<meta name="keywords" content="jquery,ui,easy,easyui,web">
	<meta name="description" content="easyui help you build your web page easily!">
	<title>Add search functionality in DataGrid - jQuery EasyUI Demo</title>
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/themes/icon.css">
	<link rel="stylesheet" type="text/css" href="http://www.jeasyui.com/easyui/demo/demo.css">
	<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
	<script type="text/javascript" src="http://www.jeasyui.com/easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		function doSearch(){
			$('#tt').datagrid('load',{
				codigo_producto: $('#codigo_producto').val(),
				nombre_producto: $('#nombre_producto').val()
			});
		}
	</script>
</head>
<body>
	<h2>Add search functionality in DataGrid</h2>
	<div class="demo-info" style="margin-bottom:10px">
		<div class="demo-tip icon-tip">&nbsp;</div>
		<div>Enter search values and press search button.</div>
	</div>
	
	<table id="tt" class="easyui-datagrid" 
			url="datagrid24_getdata.php"
			title="Searching" iconCls="icon-search" toolbar="#tb"
			rownumbers="true" pagination="true">
		<thead>
			<tr>
				
				<th field="codigo_producto" width="120">codigo_producto</th>
                <th field="nombre_producto" width="120">nombre_producto</th>
                <th field="stock" width="80">stock</th>
				<th field="precio_costo" width="80" align="right">precio_costo</th>
				<th field="precio_venta" width="80" align="right">precio_venta</th>
				<th field="descripcion" width="200">descripcion</th>
				<th field="embalaje" width="60" align="center">embalaje</th>
			</tr>
		</thead>
	</table>
	<div id="tb" style="padding:3px">
		<span>Item ID:</span>
		<input id="codigo_producto" style="line-height:26px;border:1px solid #ccc">
		<span>Product ID:</span>
		<input id="nombre_producto" onKeyUp="doSearch()" style="line-height:26px;border:1px solid #ccc">
		<a href="#" class="easyui-linkbutton" plain="true" onClick="doSearch()">Search</a>
	</div>
</body>
</html>